<template>
    <a-modal v-model:visible="visible" :title="title" :width="width > 800 ? '100%' : width" @before-ok="save"
        @close="reset">
        <a-from size="large" auto-label-width>
            <a-form-item label="声音" field="audio">
                <a-upload accept="audio/*" :custom-request="handleUpload" :file-list="fileList"></a-upload>
            </a-form-item>
            <a-form-item label="时长" field="audioDuration">
                <a-input-number v-model="form.audioDuration" placeholder="请输入声音时长（秒）"></a-input-number>
            </a-form-item>
            <a-form-item label="公司" field="companyName">
                <a-input v-model.trim="companyName" placeholder="请输入公司" :max-length="99" disabled="false" />
            </a-form-item>
            <a-form-item label="简介" field="companyId">
                <a-checkbox-group v-model="selectedIntroductionIds">
                    <a-checkbox v-for="item in introductionDicList" :key="item.value" :value="item.value">{{ item.label
                    }}</a-checkbox>
                </a-checkbox-group>
            </a-form-item>
        </a-from>
    </a-modal>
</template>

<script setup lang="ts" >
import { uploadFile } from '@/apis';
import { getBusinessCard, updateBusinessCard } from '@/apis/website/businessCard';
import type { CompanyIntroductionQuery } from '@/apis/website/companyIntroduction';
import { useForm } from '@/hooks';
import { useIntroductionDict } from '@/hooks/app';
import type { RequestOption } from '@arco-design/web-vue';
import { Message } from '@arco-design/web-vue';

const visible = ref(false)
const title = "更多配置"
const width = 600

const { form, resetForm } = useForm({

})

const { introductionDicList, getIntroductionDicList } = useIntroductionDict()

const queryDic = ref<CompanyIntroductionQuery>()

const companyName = ref()

const selectedIntroductionIds = ref()


//重置
const reset = () => {
    companyName.value = undefined
    introductionDicList.value = []
    selectedIntroductionIds.value = []
    fileList.value = []

    resetForm()
}

const dataId = ref()
// 修改
const onUpdate = async (id: string) => {

    reset()
    dataId.value = id
    const res = await getBusinessCard(id)
    Object.assign(form, res.data)

    companyName.value = res.data.company?.name

    if (res.data.companyIntroduction) {
        selectedIntroductionIds.value = res.data.companyIntroduction.map(item => item.id)
    }

    if (res.data.audio) {
        fileList.value.push({
            uid: res.data.id,
            name: 'uploadAudio.mp3',
            url: res.data.audio
        })
    }

    if (!introductionDicList.value.length) {
        getIntroductionDicList(res.data.company.id)
    }
    visible.value = true
}

//保存
const save = async () => {

    form.audio = fileList.value[0].url
    form.companyIntroduces = selectedIntroductionIds


    try {
        await updateBusinessCard(form, dataId.value)
        Message.success('修改成功')
    } catch (error) {
        return false
    }

}

const fileList = ref([] as any)
//上传图片
const handleUpload = (options: RequestOption) => {
    const controller = new AbortController()
        ; (async function requestWrap() {
            const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
            onProgress(20)
            const formData = new FormData()
            formData.append(name as string, fileItem.file as Blob)
            try {
                const res = await uploadFile(formData)
                Message.success('上传成功')
                fileList.value.push({
                    uid: '-1',
                    name: 'upload1.mp3',
                    url: res.data.url
                })
                onSuccess(res)
            } catch (error) {
                onError(error)
            }
        })()
    return {
        abort() {
            controller.abort()
        },
    }
}

defineExpose({ onUpdate })
</script>

<style lang="scss" scoped></style>